<template>
	<view class="">
		<view class="header">
			<view class="header_info">
				<view class="jewel_type" @tap="select_gold_func">
					<view class="type_title">{{ select_gold_type }}</view>
					<image class="gold_type_select" src="../../../static/images/jewel/gold_type_select.png"></image>
				</view>
				<image class="jewel_buy_logo" src="../../../static/icons/jewel/jewel_buy_logo.png"></image>
				<view class="gold_count_title">{{ now_name }}(元/g)</view>
				<view class="gold_count">{{ today_price }}</view>
				<view class="gold_info">
					<view class="now_gold_price_box">
						<view class="now_gold_title">{{ select_gold_type }}总价值(元)</view>
						<view class="now_gold_price">{{ total_price }}</view>
					</view>
					<view class="now_gold_price_box">
						<view class="now_gold_title">总克数(克)</view>
						<view class="now_gold_price">{{ weight }}</view>
					</view> 
					<view class="now_gold_price_box">
						<view class="now_gold_title">折旧费</view>
						<view class="now_gold_price">{{ zonghe_price }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="trend_tab">
			<!-- <view class="trend_time" :class="[month_act == '1' ? 'trend_act' : '']" @tap="select_month" data-month-type="1">近3天</view> -->
			
			<view class="trend_time"  v-for="(item,index) in month_arr" :key="index" :class="[month_act == index ? 'trend_act' : '']" @tap="select_month" :data-month-type="index">{{item}}</view>
			<!-- <view class="trend_time" :class="[month_act == '2' ? 'trend_act' : '']" @tap="select_month" data-month-type="2">近1月</view>
			<view class="trend_time" :class="[month_act == '3' ? 'trend_act' : '']" @tap="select_month" data-month-type="3">近3月</view>
			<view class="trend_time" :class="[month_act == '4' ? 'trend_act' : '']" @tap="select_month" data-month-type="4">近半年</view> -->
		</view>
		<view class="g_class">元/g</view>
		<canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
		<!-- 下拉框 -->
		<view class="tap_bg" :style="{display: show_tab == '1' ? 'block': 'none' }" @tap="select_gold_func" data-show-tab="0">
			<view class="tap_box">
				<view class="tap" v-for="(item,index) in gold_type" :key="index" catchtap="select_gold" :data-type="item">{{item}}</view>
				<view class="tap cancel" @tap="select_gold_func" data-show-tab="0">取消</view>
			</view>
		</view>
		<view class="jewel_info">
			<view class="jewel_title">
				<image class="jewel_buy_info" src="../../../static/icons/jewel/jewel_buy_info.png"></image>
				享珠宝规则
			</view>
			<view class="jewel_info_content">
				<view>
					挑选
					<view class="gold_text">{{ select_gold_type }}</view>
					商品，全网劲爆低价！支付享宝金即可享用！ 三年内，随时换、退商品，原价退换时综合费低至每克
					<view class="gold_text">{{ zonghe_price }}</view>
					元！既能保值升值，又能持续戴新款！ 我们是您的免费珠宝储蓄卡！
				</view>
			</view>
		</view>
		<view class="empty_view"></view>
		<navigator open-type="navigate" class="go_navigator" :url="url">弹{{ gold_type_format }}</navigator>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
	</view>
</template>

<script>
import hl from '@/common/common_zb.js';
import wxcharts from '@/components/wxcharts/wxcharts.js';
export default {
	data() {
		return {
			today_price: '0',	// 今天价格
			weight: '',	// 总克数
			total_price: 0,	// 总价格
			zonghe_price: '',
			now_name: '当前黄金价',
			select_gold_type: '',	// 默认选中的
			gold_type_format: '',	// 格式化后的珠宝类型  黄金9999 ===> 黄金
			month_act: 1,
			show_tab: 2,
			url: '',
			loaddata: {},	// 加载数据
			bIsShowLoading: false,
			gold_type: []	,// 珠宝类型
			month_arr: [],	// 时间月份类型
		};
	},
	onLoad() {
		this.loaddata.month_type = this.month_act;
		this.get_gold_data(this.loaddata);
	},
	
	methods: {
		// 获取选择的类型数据
		get_gold_data(data) {
			let that = this;
			this.bIsShowLoading = true;
			hl.get('index/get_gold_diagram', data, false, function (res){
				that.bIsShowLoading = false;
				let resdata = res.data;
				if (resdata.code == '0') {
					let data = {
						categories: [],
						data: []
					};
					let list = resdata.data;
					for (let i in list) {
						data.categories.push(list[i]['uptime']);
						data.data.push(list[i]['last_price']);
					}
					that.today_price = resdata.today_price;
					that.weight = resdata.weight;
					that.total_price = (resdata.weight * resdata.today_price).toFixed(2);
					that.zonghe_price = resdata.zonghe_price;
					that.now_name = resdata.now_name;
					that.gold_type = resdata.gold_type;
					that.month_arr = resdata.month_arr;
					if(that.select_gold_type == '')that.select_gold_type = resdata.gold_type[0];
					if(that.gold_type_format == '')that.gold_type_format = that.select_gold_type.replace(/[0-9]/ig, "");
					that.url = resdata.url;
					that.charts_func(data);
				}
			})
		},
		charts_func(data) {
			let that = this;
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			let columnChart = new wxcharts({
				canvasId: 'columnCanvas',
				title: {
					name: '1111',
					fontSize: '130'
				},
				type: 'line',
				animation: true,
				categories: data.categories,
				series: [
					{
						name: that.select_gold_type,
						color: '#fc3d35',
						data: data.data
					}
				],
				dataPointShape: true,
				xAxis: {
					disableGrid: true,
					type: 'calibration',
					gridColor: '#d2d2d2'
				},
				extra: {
					lineStyle: 'curve',
					legendTextColor: '#fc3d35'
				},
				width: windowWidth,
				height: 155
			});
		},
		// 选择黄金类型
		select_gold_func(){
			let that = this;
			let itemList = that.gold_type;			
			uni.showActionSheet({
				itemList: that.gold_type,
				success: function (res) {
					let tapIndex = res.tapIndex;
					let value = itemList[tapIndex];
					that.select_gold_type = value;
					let load = {
						month_type: that.month_act,
						field: itemList[tapIndex]
					};
					that.gold_type_format = value.replace(/[0-9]/ig, "");
					that.get_gold_data(load);
				},
				fail: function (res) {
				}
			});
		},
		//选择月份
		select_month(e){
			let monthType = e.currentTarget.dataset.monthType;
			if(monthType != this.month_act) {
				this.month_act = monthType;
				this.get_gold_data({
				  month_type: monthType,
				  field: this.select_gold_type
				});
			}
		}
	}
};
</script>

<style>
.header {
	height: 386rpx;
	width: 100%;
	background: url('http://jewel.gdhenglang.com/static/images/gold_bg.png?2') repeat-y;
	background-size: 100%;
}
.header_info {
	color: #fff;
	text-align: center;
}

.jewel_buy_logo {
	width: 166rpx;
	height: 83rpx;
	position: absolute;
	left: 17rpx;
	top: 16rpx;
}

.jewel_type {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 34rpx;
}
.type_title {
	display: inline-block;
	margin-right: 15rpx;
}
.gold_type_select {
	width: 30rpx;
	height: 17rpx;
}
.gold_count_title {
	font-size: 40rpx;
}
.gold_count {
	font-size: 60rpx;
	margin-top: 15rpx;
}
.gold_info {
	width: 90%;
	margin: 0 auto;
}
.now_gold_price_box:first-child {
	width: 40% !important;
}
.gold_info .now_gold_price_box {
	width: 30%;
	float: left;
	margin-top: 13rpx;
}
.now_gold_title,
.now_gold_price {
	font-size: 28rpx;
}
.now_gold_price {
	margin-top: 15rpx;
}

/** 走势图历史文字 **/
.trend_title {
	height: 88rpx;
	color: #302e2e;
	font-size: 28rpx;
	text-align: center;
	background: #f2f3f5;
	line-height: 88rpx;
	overflow: hidden;
	width: 100%;
}

/** 选项卡 **/
.trend_tab {
	height: 75rpx;
	width: 100%;
}
.trend_tab .trend_time {
	width: 25%;
	line-height: 75rpx;
	text-align: center;
	float: left;
	color: #302e2e;
	font-size: 28rpx;
}
.trend_act {
	color: #fc3d35 !important;
	height: 72rpx;
	border-bottom: 4rpx solid #fc3d35;
}
.canvas {
	z-index: 8rpx;
}
/** 弹出框 **/
.tap_bg {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0rpx;
	z-index: 100;
}
.tap_box {
	position: fixed;
	bottom: 0rpx;
	width: 100%;
	background: #efeff4;
	height: 500rpx;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 200;
}
.tap {
	height: 92rpx;
	line-height: 92rpx;
	text-align: center;
	font-size: 28rpx;
	background: #fcfcfd;
	width: 100%;
	border-bottom: 1rpx solid #f2f2f3;
}
.tap:nth-last-child(2) {
	border-bottom: none !important;
}
.cancel {
	margin-top: 12rpx;
}
.g_class {
	font-size: 26rpx;
	color: #fc3d35;
	margin: 20rpx 0 0rpx 40rpx;
	font-weight: bold;
}
.canvas {
	width: 100%;
	height: 160px;
}
.jewel_info {
	width: 90%;
	margin: 0 auto;
}
.jewel_title {
	color: #fc3d35;
	font-size: 28rpx;
}
.jewel_buy_info {
	width: 46rpx;
	height: 42rpx;
	margin-right: 20rpx;
	float: left;
}
.jewel_info_content {
	width: 90%;
	margin: 0 auto;
	color: #8b8888;
	font-size: 28rpx;
	line-height: 54rpx;
	margin-top: 20rpx;
}
.gold_text {
	color: #fc3d35;
	display: inline-block;
	margin: 0rpx 5rpx;
}
.empty_view{
	height: 120rpx;
}
.go_navigator {
	height: 100rpx;
	font-size: 34rpx;
	background: #fc3d35;
	color: #fff;
	line-height: 100rpx;
	text-align: center;
	width: 100%;
	margin-top: 10rpx;
	position: fixed;
	bottom: 0;
}
</style>
